import React from 'react';
import { Button, Space, Typography, Card, Row, Col } from 'antd';
import {
  PlayCircleOutlined,
  ShopOutlined,
  SkinOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

interface StartScreenProps {
  onNewGame: () => void;
  onWarehouse: () => void;
  onEquipment: () => void;
  onTestAddItems?: () => void; // 测试按钮（可选）
}

const StartScreen: React.FC<StartScreenProps> = ({ onNewGame, onWarehouse, onEquipment, onTestAddItems }) => {
  return (
    <div style={{ padding: '48px 24px', textAlign: 'center', backgroundColor: '#141414', minHeight: 'calc(100vh - 64px)' }}>
      <Row justify="center">
        <Col xs={24} sm={20} md={16} lg={12} xl={10}>
          <Card style={{ backgroundColor: '#1f1f1f', border: '1px solid #303030' }}>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              {/* 游戏标题 */}
              <div>
                <Title level={1} style={{
                  fontSize: '3rem',
                  color: '#1890ff', /* 保持蓝色主色调 */
                  marginBottom: 8
                }}>
                  搜打撤
                </Title>
                <Paragraph style={{ fontSize: '1.2rem', color: '#d9d9d9' }}>
                  文字冒险游戏
                </Paragraph>
              </div>

              {/* 游戏菜单 */}
              <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <Button
                  type="primary"
                  size="large"
                  block
                  icon={<PlayCircleOutlined />}
                  onClick={onNewGame}
                  style={{ height: '60px', fontSize: '16px' }}
                >
                  开始对局
                </Button>

                <Button
                  size="large"
                  type='primary'
                  block
                  icon={<ShopOutlined />}
                  onClick={onWarehouse}
                  style={{ height: '60px', fontSize: '16px' }}
                >
                  仓库
                </Button>

                <Button
                  size="large"
                  type='primary'
                  block
                  icon={<SkinOutlined />}
                  onClick={onEquipment}
                  style={{ height: '60px', fontSize: '16px' }}
                >
                  装备
                </Button>

                {/* 测试按钮 - 独立区域方便删除 */}
                {onTestAddItems && (
                  <div style={{ 
                    marginTop: '20px', 
                    paddingTop: '20px', 
                    borderTop: '1px dashed #444',
                  }}>
                    <Button
                      size="small"
                      type="dashed"
                      danger
                      block
                      onClick={onTestAddItems}
                      style={{ height: '40px', fontSize: '14px' }}
                    >
                      🧪 测试：添加装备到仓库
                    </Button>
                  </div>
                )}
              </Space>

              {/* 游戏信息 */}
              <div style={{ marginTop: 32, opacity: 0.7 }}>
                <Paragraph type="secondary">版本: 1.0.0</Paragraph>
                <Paragraph type="secondary" style={{ fontSize: '14px' }}>
                  使用浏览器本地存储保存游戏进度
                </Paragraph>
              </div>
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default StartScreen;
